<template>
    <div>
        <h1>欢迎注册博客</h1>
        <table>
            <tbody>
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" v-model="userinfo.name" ></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" v-model=userinfo.pwd ></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" v-model="userinfo.pwd2"></td>
                </tr>
                <tr>
                    <td>请选择城市</td>
                    <td>
                        <select name=""  v-model="userinfo.process">
                            <option value="">请选择</option>
                            <option :value="item.name" v-for="item in provinces" >{{item.name}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>请选择性别</td>
                    <td>
                        <input type="radio" value="1" name="sex" v-model="userinfo.sex"  />男
                        <input type="radio" value="0" name="sex" v-model="userinfo.sex" /> 女
                        <input type="radio" value="2" name="sex" v-model="userinfo.sex" /> 不好说
                    </td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <input type="checkbox" name="like" :value="1" v-model="userinfo.likes" />打篮球
                        <input type="checkbox" name="like" :value="2" v-model="userinfo.likes" />绘画
                        <input type="checkbox" name="like" :value="3" v-model="userinfo.likes" />音乐
                        <input type="checkbox" name="like" :value="4" v-model="userinfo.likes" />算法
                    </td>                       
                </tr>
                <tr>
                    <td>职业</td>
                    <td>
                        <select name=""  v-model="userinfo.job">
                            <option value="">请选择</option>
                            <option :value="item.name" v-for="item in jobss" >{{item.name}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>
                        <textarea name="" id="" rows="3" role="10" v-model="userinfo.content"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="取值" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
const provinces = ref([
{ name: '北京市', code: '110000' },
{ name: '天津市', code: '120000' },
{ name: '河北省', code: '130000' },
{ name: '山西省', code: '140000' },
{ name: '内蒙古自治区', code: '150000' },
{ name: '辽宁省', code: '210000' },
{ name: '吉林省', code: '220000' },
{ name: '黑龙江省', code: '230000' },
{ name: '上海市', code: '310000' },
{ name: '江苏省', code: '320000' },
{ name: '浙江省', code: '330000' },
{ name: '安徽省', code: '340000' },
{ name: '福建省', code: '350000' },
{ name: '江西省', code: '360000' },
{ name: '山东省', code: '370000' },
{ name: '河南省', code: '410000' },
{ name: '广西壮族自治区', code: '450000' },
]);
const jobss = ref([
{ name: '医生', money: '110000' },
{ name: '讲师', money: '120000' },
{ name: '律师', money: '130000' },

]);
let userinfo:any =reactive({
    name:'',
    pwd:'',
    pwd2:'',
    sex:'',
    process:'',
    job:'',
    likes:[],
    content:''
})
const ok=()=>{
    console.log(userinfo);
}
</script>

<style scoped>

</style>